<template>
	<div>
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="item findUl" v-for="item of list" :key="item.id" @click="toNewsDetails(item.id)">
					<img :src="item.thumbnail"/>
					<div class="min">
						<p>{{item.title}}</p>
						<p>2018/10/27 &nbsp;&nbsp;09:51:22</p>
					</div>
				</div>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
	import { dateFormat } from 'vux';
	import { find } from './../utils/api';
	export default {
		data() {
			return {
				list: [
					// {id:'1',createTime:'1993',title:'费共和国环境',thumbnail:'http://www.9665.com/uploadfile/2018/0712/20180712051007525.png'},
					// {id:'2',createTime:'山东省山东3',title:'费共和国环境3',thumbnail:'http://www.9665.com/uploadfile/2018/0712/20180712051007525.png'}
				],
				size: 10, // 每页数量
				total: '', // 总数量
				listLength: '', // 当前总数量
				isLoading: false,
				finished: false,
				loading: false
			}
		},
		mounted() {
			this.List();
		},
		methods: {
			toNewsDetails(id) {
				this.$router.push({
					name: 'NewsDetails',
					query: {
						id
					}
				})
			},
			List() {
				find.getDiscover({
					current: 1,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						this.listLength = res.data.records.length; // 当前总数量
						this.total = res.data.total; // 总数量
					}
				})
			},
			onRefresh() { // 下拉刷新
				this.List();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.List();
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			}
		},
		filters: {
			dateFormat
		}
		
	}
</script>

<style lang="less" scoped>
.findUl{overflow: hidden;margin:0 .3rem;border-bottom:1px solid rgba(134, 144, 171, 0.3);padding:.3rem 0;font-size:0;
	img{display: inline-block;vertical-align: middle;margin-right:.3rem;width: .75rem}
	.min{
		max-width:84%;display: inline-block;vertical-align: middle;
		p{
			color: #6c6f7d;
			font-size: .24rem;
			&:nth-child(1){
				font-size: .3rem;
				font-weight: 500;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 1.5;margin-bottom:.1rem;color: #8690ab;
			}
		}
	}

}

	/deep/ .van-tabs__nav--card {
		margin: 0px 60px;
		border: 1px solid transparent;
	}
	
	/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
		color: white;
		background-color: rgb(77, 89, 126);
	}
	
	/deep/ .van-tabs__nav {
		background-color: rgb(33, 38, 57);
	}
	
	/deep/ .van-tabs__nav--card .van-tab {
		color: rgb(133, 141, 172);
		border-right: 0;
	}
	
	/deep/ .van-icon,
	.van-icon::before {
		z-index: 100;
		position: absolute;
		right: 5px;
		top: 1px;
	}
	
	/deep/ .buy .van-tabs__wrap {
		right: inherit;
		padding-left: 15px;
		color: white;
	}
	
	/deep/ .unbuy .van-tabs__wrap {
		right: inherit;
		padding-left: 15px;
		color: white;
	}
	
	/deep/ .van-tabs__nav {
		background: transparent;
	}
	
	/deep/ .van-tab--active {
		color: white;
	}
	
	/deep/ .van-tabs__line {
		height: 2px;
		bottom: 25px;
		background-color: #00dd94;
	}
	
	/deep/ .van-tab {
		min-width: inherit;
	}
	
	/deep/ .van-card__thumb {
		width: 25px;
		height: 25px;
		margin-top: 8px;
	}
	
	/deep/ .van-card__bottom {
		position: absolute;
		right: 0;
		top: 10px
	}
	
	/deep/ .van-button--small {
		height: 25px;
		line-height: 23px;
		margin-top: 30px;
	}
	
	.pad {
		padding: 3px 0px;
	}
	
	.van-card {
		background: transparent;
		color: white;
	}
	
	.van-card__content {
		border-bottom: 1px solid rgb(33, 38, 57);
		padding: 5px 0px;
		padding-bottom: 15px;
	}
	
	/deep/ .van-tabs__nav--card .van-tab {
		background: rgb(33, 38, 57);
	}
	
	/deep/ .van-card:not(:first-child) {
		margin-top: 0px;
	}
	
	.menu {
		padding: 10px;
		background: #43495e;
		border-radius: 3px;
		color: white;
	}
	
	/deep/ .menu.van-popup--center {
		top: 15%;
		left: initial;
		right: -55px;
	}
	
	/deep/ .buym.van-popup {
		background: rgb(34, 38, 56);
		color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	
	/deep/ .buyc .van-tabs__wrap {
		right: inherit;
		color: white;
	}
	
	/deep/ .buyc .van-tab {
		margin-right: 20px;
	}
	
	/deep/ .buyc .van-tabs__line {
		background: rgb(71, 170, 105);
	}
	
	/deep/ .buyc .van-button--plain {
		background-color: transparent;
	}
	
	/deep/ .buyc .van-button--small {
		margin-top: 0px;
	}
	
	/deep/ .buyc .van-hairline--surround::after {
		border: 0;
	}
	
	/deep/ .buyc .van-tabs__content {
		padding-top: 10px;
	}
	
	/deep/ .buyc .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .buyc .van-button {
		height: 35px;
		line-height: 35px;
	}
	
	/deep/ .buyc .van-tabs__line {
		top: 35px;
	}
	
	/deep/ .buyo.van-popup {
		background: rgb(34, 38, 56);
		color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	
	/deep/ .buyo .van-button--small {
		margin-top: 0px;
	}
	
	/deep/ .buyo .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .buyo .van-button {
		height: 35px;
		line-height: 35px;
	}
	
	/deep/ .buyc .van-cell {
		padding: 5px 15px;
	}
</style>